<template>
  <Back title="旅游攻略" />
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div 
      v-for="(item, index) in list"
      :key="index"
      class="strategy-card"
    >
      <!-- 用户信息区 -->
      <div class="user-info">
        <van-image
          round
          width="40"
          height="40"
          :src="item.avatar"
        />
        <div class="user-meta">
          <span class="username">{{ item.username }}</span>
          <span class="time">{{ formatTime(item.time) }}</span>
        </div>
      </div>

      <!-- 攻略内容 -->
      <h3 class="title">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>

      <!-- 交互按钮 -->
      <div class="actions">
        <van-button icon="comment" size="small">评论</van-button>
        <van-button icon="like" size="small">点赞</van-button>
      </div>
    </div>
  </van-list>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
import Back from '../utils/Back.vue';
const router = useRouter();
const onClickLeft = () => history.back();

const list = ref([
  {
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    username: '旅行达人小美',
    time: new Date(),
    title: '三天两夜杭州西湖深度游',
    content: '推荐路线：第一天：断桥残雪→白堤→平湖秋月→孤山→曲院风荷...第二天：雷峰塔→净慈寺→苏堤春晓→花港观鱼...美食推荐：楼外楼、知味观'
  },
  {
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/dog.jpeg',
    username: '背包客老张',
    time: new Date(Date.now() - 3600*1000*24),
    title: '西藏自驾游全攻略',
    content: '必备物品：氧气瓶、防晒霜、墨镜...路线安排：拉萨→林芝→波密→然乌湖→珠峰大本营...注意事项：提前办理边防证，注意高原反应'
  },
  {
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
    username: '亲子游专家',
    time: new Date(Date.now() - 3600*1000*48),
    title: '上海迪士尼亲子游指南',
    content: '推荐项目：飞跃地平线、加勒比海盗、创极速光轮...餐饮攻略：皇家宴会厅、巴波萨烧烤...住宿建议：玩具总动员酒店'
  }
]);

const loading = ref(false);
const finished = ref(false);

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm');
};

const onLoad = () => {
  setTimeout(() => {
    finished.value = true;
  }, 1000);
};
</script>

<style scoped>
.strategy-card {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-meta {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
}

.title {
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 12px;
}

.actions {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}
</style>